import { useMemo } from 'react'
import './styles.less'

function RecommendComponent({ list, onClick, conversation = '', recohandleMouseEnter, recohandelMouseLeave }) {
  return (
    <div
      onMouseEnter={recohandleMouseEnter}
      onMouseLeave={recohandelMouseLeave}
      className={
        conversation
          ? 'item chatComponent_recommendedContTag group relative h-full w-[100%]'
          : 'item group relative h-full w-[100%]'
      }
      style={{
        background: '#F5F6F8',
        padding: '16px 20px 20px',
        boxSizing: 'border-box',
        borderRadius: '8px'
        // boxShadow:
        //   '0px -8px 10px -5px rgba(0, 0, 0, 0.03),-8px 0px 10px -5px rgba(0, 0, 0, 0.03), 8px 0px 10px -5px rgba(0, 0, 0, 0.03)'
      }}
    >
      <span
        className="flexRowStart"
        style={{
          marginBottom: '16px',
          fontSize: '16px',
          color: '#000000',
          fontWeight: '600'
        }}
      >
        <span>推荐问题</span>
      </span>
      <div className="chatComponent_recommendedCont_caseY  flexRowStart flexWrap">
        {list.map((chat, i) => (
          <div
            className="flexRowStart flexWrap"
            onClick={e => {
              onClick(chat)
            }}
            key={i}
            style={{ maxWidth: '100%' }}
          >
            <p
              className={
                conversation
                  ? 'cursonCase chatComponent_recommendedCont chatComponent_recommendedCont_caseY_conver domOverflowEllip'
                  : 'cursonCase chatComponent_recommendedCont chatComponent_recommendedContTag domOverflowEllip'
              }
              style={{ color: '#7587A5', width: '100%' }}
            >
              {chat}
            </p>
          </div>
        ))}
      </div>
    </div>
  )
}

export default function RecommendedCont({
  locked,
  recommendedHid,
  chatsRef,
  list,
  handleSelectChat,
  chatId,
  recomConversation,
  regenerate,
  onClick,
  conversation = '',
  recohandleMouseEnter,
  recohandelMouseLeave,
  mouseHid
}) {
  // 随机按序取三个
  const words = useMemo(() => {
    return list
  }, [list])

  if (locked || !words.length) return null
  /* 发送后的状态 */
  if (words.length > 0) {
    return (
      <div style={{ position: 'relative', bottom: '8px' }}>
        {/* 收起icon */}
        {(mouseHid || (!mouseHid && !recommendedHid)) && words.length > 0 && (
          <div
            onMouseEnter={recohandleMouseEnter}
            onMouseLeave={recohandelMouseLeave}
            className="chantComponent_offCloseIcon cursonCase"
            onClick={regenerate}
          >
            {recommendedHid ? (
              <svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="44" height="16" rx="8" fill={conversation ? 'white' : ' rgb(245, 246, 248)'} />
                <path
                  d="M18 6L22 10L26 6"
                  stroke="#B5BFDA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  // F5F6F8
                />
              </svg>
            ) : (
              <svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="44" height="16" rx="8" fill={conversation ? 'white' : ' rgb(245, 246, 248)'} />
                <path
                  d="M18 10L22 6L26 10"
                  stroke="#B5BFDA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
          </div>
        )}
        {/* 推荐列表 */}
        {recommendedHid && (
          <RecommendComponent
            recohandleMouseEnter={recohandleMouseEnter}
            recohandelMouseLeave={recohandelMouseLeave}
            conversation={conversation}
            onClick={onClick}
            list={words}
          ></RecommendComponent>
        )}
      </div>
    )
  }
}
